import _ from 'lodash';
export default {
  components: {},
  name: 'CustomSettings',
  props: ['value'],
  data() {
    return {
      model: [],
    };
  },
  computed: {
    cloneModel() {
      return _.map(_.filter(_.cloneDeep(this.value), (v) => {
        if (v.property) {
          return v.property;
        }
      }), 'property');
    },
    valueMap() {
      return _.keyBy(_.cloneDeep(this.value), 'property');
    },
    cloneValue() {
      return _.cloneDeep(this.value);
    },
  },
  render(h) {
    const self = this;
    return h('div', {}, [
      h(
        'el-popover',
        {
          props: {
            placement: 'bottom',
            trigger: 'click',
            width: '150',
          },
          on: {
            show: () => {
              self.model = self.value.filter(e => e.property && e.show).map(v => v.property);
            },
          },
        },
        [
          h(
            'el-checkbox-group',
            {
              props: {
                value: this.model,
                min: 6,
              },
              on: {
                input: function (v) {
                  self.model = v;
                  const xor = _.xor(self.cloneModel, self.model);
                  for (const i of xor) {
                    if (self.valueMap[i] && self.valueMap[i].show) {
                      self.valueMap[i].show = false;
                    }
                  }
                  for (const i of self.model) {
                    if (self.valueMap[i] && !self.valueMap[i].show) {
                      self.valueMap[i].show = true;
                    }
                  }
                  self.$emit('input', Object.values(self.valueMap));
                },
              },
            },
            this.cloneValue.map((e, i) => {
              return e.property && h('el-checkbox', {
                props: {
                  label: e.property,
                  disabled: e.disabled,
                },
              }, [h('span', e.label)]);
            })
          ),
          h('i', {
            attrs: {
              class: ['el-icon-s-tools'],
            },
            style: {
              width: '14px',
              heigth: '14px',
              color: '#879BBA',
            },
            slot: 'reference',
          })
        ]
      )
    ]);
  },
};

